<template>
  <div>
    <a-tabs style="background-color: #ffffff">
      <a-tab-pane key="1" tab="待处理">
        <div style="padding: 0px 16px">
          <a-table :columns="columns" :data-source="data">
            <template slot="action">
              <a @click="modalShow = !modalShow">处理</a>
            </template>
          </a-table>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="已完成">
        <div style="padding: 0px 16px">
          <a-table :columns="columns2" :data-source="data2"></a-table>
        </div>
      </a-tab-pane>
    </a-tabs>

    <a-modal
      title="请求处理"
      :width="600"
      :visible="modalShow"
      :closable="false"
      @ok="modalShow = !modalShow"
      @cancel="modalShow = !modalShow">
      <a-textarea rows="10" placeholder="请输入处理内容"/>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    title: '服务请求ID',
    dataIndex: 'reqId',
    key: 'reqId',
    align: 'center'
  },
  {
    title: '订单ID',
    dataIndex: 'ordId',
    key: 'ordId',
    align: 'center'
  },
  {
    title: '创建时间',
    dataIndex: 'crtTime',
    key: 'crtTime',
    align: 'center'
  },
  {
    title: '服务内容',
    dataIndex: 'content',
    key: 'content',
    align: 'center'
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' }
  }
]
const columns2 = [
  {
    title: '服务请求ID',
    dataIndex: 'reqId',
    key: 'reqId',
    align: 'center'
  },
  {
    title: '订单ID',
    dataIndex: 'ordId',
    key: 'ordId',
    align: 'center'
  },
  {
    title: '创建时间',
    dataIndex: 'crtTime',
    key: 'crtTime',
    align: 'center'
  },
  {
    title: '处理时间',
    dataIndex: 'delTime',
    key: 'delTime',
    align: 'center'
  },
  {
    title: '处理人',
    dataIndex: 'delUser',
    key: 'delUser',
    align: 'center'
  },
  {
    title: '服务内容',
    dataIndex: 'content',
    key: 'content',
    align: 'center'
  },
  {
    title: '回复内容',
    dataIndex: 'returnContent',
    key: 'returnContent',
    align: 'center'
  }
]
const data = [
  {
    reqId: '01',
    ordId: 'ORD0001',
    crtTime: '2020-02-02 14:00:00',
    content: '退换货服务'
  },
  {
    reqId: '02',
    ordId: 'ORD0002',
    crtTime: '2020-02-02 14:00:00',
    content: '退货服务'
  }, {
    reqId: '03',
    ordId: 'ORD0003',
    crtTime: '2020-02-02 14:00:00',
    content: '商品咨询服务'
  }
]
const data2 = [
  {
    reqId: '01',
    ordId: 'ORD0001',
    crtTime: '2020-02-02 14:00:00',
    content: '退换货服务',
    delTime: '2020-02-02 14:01:59',
    delUser: '张三',
    returnContent: '同意'
  },
  {
    reqId: '02',
    ordId: 'ORD0002',
    crtTime: '2020-02-02 14:00:00',
    content: '退货服务',
    delTime: '2020-02-02 14:01:59',
    delUser: '李四',
    returnContent: '同意'
  }, {
    reqId: '03',
    ordId: 'ORD0003',
    crtTime: '2020-02-02 14:00:00',
    content: '商品咨询服务',
    delTime: '2020-02-02 14:01:59',
    delUser: '王五',
    returnContent: '详见商品详细'
  }
]
export default {
  name: 'ServerRequest',
  data () {
    return {
      data,
      columns,
      data2,
      columns2,
      modalShow: false
    }
  }
}
</script>

<style scoped>

</style>
